import React, { Component } from "react";
import { NavBar, InputItem, Button, Toast } from "antd-mobile";
import "./Login.less";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { reqLogin } from "../../http/api";
export default class Login extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        password: "",
      },
    };
  }
  Change(val, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: val,
      },
    });
  }
  login() {
    reqLogin(this.state.user).then((res) => {
      if (res.data.code === 200) {
        Toast.success(res.data.msg, 1);
        // 存用户信息
        sessionStorage.setItem("info", JSON.stringify(res.data.list));

        this.props.history.replace("/index");
      }
    });
  }
  render() {
    return (
      <div className="login">
        <NavBar>登录页</NavBar>
        {JSON.stringify(this.state.user)}
        <InputItem
          placeholder="账号"
          onChange={(val) => this.Change(val, "phone")}
        >
          账号
        </InputItem>
        <InputItem
          placeholder="密码"
          onChange={(val) => this.Change(val, "password")}
        >
          密码
        </InputItem>
        <Button type="primary" className="but" onClick={() => this.login()}>
          登录
        </Button>
        <Link to="/register">注册</Link>
      </div>
    );
  }
}

